import React from 'react'
import { connect } from 'dva'
import PageHeaderLayout from 'components/Layout/PageHeaderLayout'
import { Page } from 'components'
import OrderFilterUnExpand from 'components/Filter/OrderFilterUnExpand'
import LwjTable from 'components/LwjTable/LwjTable'
import EditModal from './EditModal'

const config = ({location, dispatch, config, loading}) => {
  const {
    items,
    currentItem,
    modalVisible,
  } = config

  const breadcrumbList = [
    {
      title: '系统管理'
    },
    {
      title: '配置管理'
    },
  ]

  /**
   * 点击编辑的事件
   * @param record
   */
  const onEdit = (record) => {
    dispatch({
      type: 'config/setItem',
      payload: record
    })
    dispatch({
      type: 'config/openModal',
      payload: {}
    })
  }

  /**
   * 表格的字段
   * @type {*[]}
   */
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: '25%'
    }, {
      title: '配置',
      dataIndex: 'configure',
      key: 'configure',
      width: '70%'
    }, {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <span>
      <a onClick={() => onEdit(record)}> 编辑 </a>
    </span>
      ),
      width: '5%'
    }
  ]

  /**
   * 定义筛选属性 表单相关
   * @type {{filterItems: *[], onFilterChange(*): void}}
   */
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'name',
        title: '名称'
      }
    ],
    onFilterChange (value) {
      dispatch({
        type: 'config/onGetList',
        payload: {
          ...value
        }
      })
    }
  }

  const modalProps = {
    visible: modalVisible,
    title: '选择用户',
    destroyOnClose: true,
    wrapClassName: 'vertical-center-modal',
    width: 1000,
    item: currentItem,
    onOk: (item) => {
      dispatch({
        type: 'config/onUpdate',
        payload: item
      })

      dispatch({
        type: 'config/hideModal',
        payload: {}
      })
    },
    onCancel: () => {
      dispatch({
        type: 'config/hideModal',
        payload: {}
      })
    }
  }

  return (
    <div>
      <PageHeaderLayout title='配置管理' breadcrumbList={breadcrumbList}>
        <Page inner>
          <OrderFilterUnExpand {...filterProps} />
          <LwjTable dataSource={items} pagination={false} columns={columns}/>
          <EditModal {...modalProps}/>
        </Page>
      </PageHeaderLayout>
    </div>
  )
}

export default connect(({location, dispatch, config, loading}) => ({
  config, loading
}))(config)
